document.addEventListener('DOMContentLoaded', function () {
    const customSelect = document.querySelector('.custom-select');
    const customSelectValue = customSelect.querySelector('.custom-select-value');
    const customSelectOptions = customSelect.querySelector('.custom-select-options');
    const hiddenSelect = document.getElementById('gender');

    // 点击自定义下拉框显示选项
    customSelect.addEventListener('click', function (event) {
        event.stopPropagation(); // 阻止事件，避免点击下拉框时触发 document 的点击事件隐藏选项
        customSelectOptions.style.display = customSelectOptions.style.display === 'block' ? 'none' : 'block';
    });

    // 点击选项更新显示值和隐藏的原生下拉框的值，并隐藏下拉框选项
    customSelectOptions.addEventListener('click', function (event) {
        if (event.target.tagName === 'LI') {
            const value = event.target.dataset.value;
            const text = event.target.textContent;
            customSelectValue.textContent = text;
            hiddenSelect.value = value;
            customSelectOptions.style.display = 'none';
        }
    });

    // 点击页面其他地方隐藏选项
    document.addEventListener('click', function () {
        customSelectOptions.style.display = 'none';
    });
});
